<template>
    <div class="welcome_group_container">
        <section v-if="checkList.value == 0" class="header_top">
            <div class="header_top_l">
                <img class="custom_avator" src="@/assets/image/channel/welcome_friends.png" alt="" />
                <div class="custom_desc">
                    <div class="custom_detail">
                        <div class="custom_desc_title">好友欢迎语</div>
                        <div class="custom_desc_desc">可为员工设置欢迎语，客户添加企微员工后将自动回复欢迎语</div>
                    </div>
                    <div class="line-item"></div>
                    <div class="title-text">
                        <div v-for="(item, index) in dataList" :key="index" class="custom_text">
                            <span class="custom_point"></span>
                            <div class="custom_text-detail">{{ item }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="welcome_group_main">
            <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
            <ZwTable
                ref="tableRef"
                class="table-box"
                tab-h="initial"
                :option="tableOption"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"
                @select="onSelect"
                @selection-change="onSelectionChange"
                @select-all="onSelectAll">
                <template #headerOperate>
                    <el-button v-auth="'GROUP_WEL_NEW'" type="primary" @click="createMoments">
                        创建入群欢迎语
                    </el-button>
                </template>
            </ZwTable>
        </div>
    </div>
    <!-- 预览抽屉层 -->
    <ZWDrawer ref="DrawerRef">
        <div class="preview">
            <div class="prev_box">
                <PhonePreview
                    ref="phonePreviewRef"
                    :input-content-data="inputContentData"
                    :material-content-data="materialContentData" />
                <!-- <div class="phone_con">
          <el-scrollbar class="phone_List">
            <Friend :FriendDetail="FriendDetail" />
          </el-scrollbar>
        </div> -->
            </div>
            <div class="pre_list">
                <ul class="pre_main">
                    <li v-for="(item, index) in cus_info" :key="index" class="pre_list_item">
                        <span class="pre__item_label">{{ item.name }}</span>
                        <span class="pre_item_con">{{
                            item.content == 'send_times' || item.content == 'users_depart_name'
                                ? custInfo[item.content]
                                : custInfo[item.content]
                        }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </ZWDrawer>
    <!-- 图片，视频弹框 -->
    <ImageVideo v-if="markShow" />
    <!-- 音频弹框 -->
    <Audio v-if="audioShow" />

    <!-- 删除弹框 -->
    <ZWDeletdialog ref="DeletdialogRef" @submit="del" />
</template>

<script setup lang="tsx">
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import ZWDrawer from '../../components/ZWDrawer.vue';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
// import Friend from '../../components/Friend.vue'
// import ZWRemid from '../../components/ZWRemid.vue'
// import useClipboard from 'vue-clipboard3'
import { ElMessage, ElButton } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
// import { Picture as IconPicture } from '@element-plus/icons-vue'
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { deepCopy } from '@/utils/helper';
import { DOWLOAD_FILE } from '@/utils/smartMarketing';
// import { useStore } from '@/store'
import { getSetionId, getVideoImage, getSuffixIcon, IsNotEmpty, downFile, initMaterialData } from '@/utils/utils';
import { channelGroupList, channelGroupInfo, channelGroupDel } from '@/api/channel/qwbase';
import { getCreateList } from '@/api/common';
import bus from '@/utils/bus';
import PhonePreview from '@/components/zw/phonePreview/welcomePhonePreview/materialPreview/index.vue';
const phonePreviewRef = ref<HTMLElement | null>();
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]);
// const store = useStore()
const DeletdialogRef: any = ref(null);
const router = useRouter();
// const isShow = ref(0)
const checkList = ref([]);
const userInfoId = ref(0);
const DrawerRef = ref(null);
// const FriendDetail = ref([])
const markShow = ref(false);
const audioShow = ref(false);
const PreviewShow = ref(false);
const defaultParams = {
    content: '',
    created_uids: [], //创建人id
    created_at: [] //创建时间
};
const custInfo = ref({});
const bigImgList = ref([]);
const cus_info = reactive([
    { name: '消息数量：', content: 'send_times' },
    { name: '设置群数量：', content: 'users_depart_name' },
    { name: '创建人：', content: 'user_name' },
    { name: '所在部门：', content: 'user_departName' },
    { name: '创建时间：', content: 'create_time' },
    { name: '最近修改人：', content: 'update_user_name' },
    { name: '最近修改时间：', content: 'updated_at' }
]);
const tableRef = ref<HTMLElement | null>(null);
const state = reactive({
    searchParams: deepCopy(defaultParams),
    searchHeight: '112px'
});
const dataList = ref(['员工个性化定制欢迎语', '分时段欢迎语']);
const searchOption = computed(() => {
    return [
        {
            label: '欢迎语',
            name: 'content',
            value: '',
            type: 'input',
            placeholder: '搜索欢迎语'
        },
        {
            label: '创建人',
            name: 'created_uids',
            value: [],
            multiple: true,
            type: 'select',
            filterable: true,
            placeholder: '请选择创建人',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getCreateList({}).then((res: any) => {
                        const targetArr = res.map((item: any) => {
                            item.name = `${item.name}  (${item.phone}) `;
                            return item;
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '创建时间',
            name: 'created_at',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        }
    ];
});
const search = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams), ...v };
};
const reset = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams) };
};
/**
 * @description: 展开收起
 */
const expandHandle = (expand: boolean) => {
    state.searchHeight = expand ? '112px' : '64px';
};

// 表格
const tableOption = [
    {
        prop: 'content',
        label: '欢迎语',
        minWidth: 220,
        showOverflowTooltip: true
    },

    {
        prop: 'content',
        label: '附件',
        minWidth: 250,
        render({ row, column, index }) {
            return row.welcome_groupchat_attachment.map((v: any, key: any) => {
                // 图片
                if (v.type === 1) {
                    return (
                        <el-tooltip
                            content={v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'}
                            placement="top"
                            effect="light">
                            <el-image
                                class="wel_content_file_item"
                                src={v.media_file.absolute_url}
                                preview-src-list={[v.media_file.absolute_url]}
                                preview-teleported={true}
                                initial-index={1}
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                {{
                                    error: () => (
                                        <img style="width: 40px; height: 40px" src="/static/file/pic.png" alt="" />
                                    )
                                }}
                            </el-image>
                        </el-tooltip>
                    );
                } else if (v.type === 2) {
                    return (
                        <el-tooltip content={v.media_file.name} placement="top" effect="light">
                            <div class="pay-item" onClick={() => downLoad(v.media_file.absolute_url, v.media_file)}>
                                <div class="play"></div>
                                <el-image
                                    class="wel_content_file_item"
                                    src={getVideoImage(v.media_file.absolute_url, 50, 50) || '/static/file/pic.png'}
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                    {{
                                        error: () => (
                                            <img style="width: 40px; height: 40px" src="/static/file/mov.png" alt="" />
                                        )
                                    }}
                                </el-image>
                            </div>
                        </el-tooltip>
                    );
                } else if (v.type === 3) {
                    return (
                        <el-tooltip content={v.link_title || '暂无标题'} placement="top" effect="light">
                            <div class="inlineblock">
                                <img
                                    class="wel_content_file_item"
                                    src="/static/file/link.png"
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                />
                            </div>
                        </el-tooltip>
                    );
                } else if (v.type === 4) {
                    return (
                        <el-tooltip
                            content={v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'}
                            placement="top"
                            effect="light">
                            <div class="inlineblock">
                                <img
                                    class="wel_content_file_item"
                                    src="/static/file/mp3.png"
                                    onClick={() => downLoad(v.media_file.absolute_url, v.media_file)}
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                />
                            </div>
                        </el-tooltip>
                    );
                } else if (v.type === 5) {
                    return (
                        <el-tooltip
                            content={v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'}
                            placement="top"
                            effect="light">
                            <div class="inlineblock">
                                <img
                                    class="wel_content_file_item"
                                    src={getSuffixIcon(v.media_file.name)}
                                    onClick={() => downLoad(v.media_file.absolute_url, v.media_file)}
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                />
                            </div>
                        </el-tooltip>
                    );
                } else if (v.type === 7) {
                    return (
                        <el-tooltip placement="top" effect="light" content={v.link_title}>
                            <div class="inlineblock">
                                {v.link_share_image && (
                                    <img
                                        class="wel_content_file_item"
                                        src={v.link_share_image}
                                        onClick={() => downLoad(v.link_share_image, v.retail_product.product_name)}
                                        style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                    />
                                )}
                                {!v.link_share_image && (
                                    <img
                                        class="wel_content_file_item"
                                        src="/static/file/shop.png"
                                        style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                    />
                                )}
                            </div>
                        </el-tooltip>
                    );
                } else if (v.type === 8) {
                    return (
                        <el-tooltip placement="top" effect="light" content={v.link_title}>
                            <div class="inlineblock">
                                {v.type === 8 && (
                                    <img
                                        v-show={v.link_share_image}
                                        class="wel_content_file_item"
                                        src={v.link_share_image}
                                        onClick={() => downLoad(v.link_share_image, v.link_title)}
                                        style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                    />
                                )}
                                {v.type === 8 && (
                                    <img
                                        v-show={!v.link_share_image}
                                        class="wel_content_file_item"
                                        src="/static/file/shop.png"
                                        style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                    />
                                )}
                            </div>
                        </el-tooltip>
                    );
                } else if (v.type === 9) {
                    return (
                        <el-tooltip placement="top" effect="light" content={v.link_title}>
                            <div class="inlineblock">
                                {v.link_share_imag ? (
                                    <img
                                        class="wel_content_file_item"
                                        src={v.link_share_imag}
                                        onClick={() => downLoad(v.link_share_imag, v.link_title)}
                                        style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                    />
                                ) : (
                                    <img
                                        class="wel_content_file_item"
                                        src="/static/file/form.png"
                                        style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                    />
                                )}
                            </div>
                        </el-tooltip>
                    );
                } else if (v.type === 10) {
                    return (
                        <el-tooltip placement="top" effect="light" content={v.link_title}>
                            <div class="inlineblock">
                                <img
                                    class="wel_content_file_item"
                                    src="/static/file/official.png"
                                    onClick={() => downLoad(v.link_share_image, v.link_title)}
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                />
                            </div>
                        </el-tooltip>
                    );
                } else if (v.type === 11) {
                    return (
                        <el-tooltip placement="top" effect="light" content={v.mini_program.title}>
                            <div class="inlineblock">
                                <el-image
                                    class="wel_content_file_item"
                                    src={v.mini_program.image_url || '/static/file/pic.png'}
                                    onClick={() => downLoad(v.mini_program.image_url, v.mini_program.title)}
                                    style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                    {{
                                        error: () => (
                                            <img
                                                style="width: 40px; height: 40px"
                                                src="/static/file/miniApp.png"
                                                alt=""
                                            />
                                        )
                                    }}
                                </el-image>
                            </div>
                        </el-tooltip>
                    );
                }
            });
        }
    },
    {
        prop: 'send_times',
        label: '消息数量',
        width: 100
    },
    {
        prop: 'user_name',
        label: '创建人',
        width: 120
    },
    {
        prop: 'user_local_department',
        label: '所在部门',
        width: 250,
        render({ row, column, index }) {
            return (
                <div>
                    {IsNotEmpty(row.user_local_department)
                        ? getSetionId('name', row.user_local_department).join('、')
                        : '--'}
                </div>
            );
        }
    },
    {
        prop: 'created_at',
        label: '创建时间',
        width: 170
    },
    {
        prop: 'updated_at',
        label: '修改时间',
        width: 170
    },
    {
        prop: 'operate',
        label: '操作',
        width: 280,
        fixed: 'right',
        isOperate: true,
        option: [
            {
                name: '预览',
                authCode: 'PREVIEW_WL_QWRUN',
                click(row: any) {
                    preInfo(row.id);
                }
            },
            {
                name: '编辑',
                authCode: 'EDIT_WL_QWRUN',
                click(row: any) {
                    drawerConfirm(row.id);
                }
            },
            {
                name: '删除',
                authCode: 'DEL_WL_QWRUN',
                click(row: any) {
                    delItem(row);
                }
            }
        ]
    }
];
const fetchApi = () => {
    // 获取文件列表
    return channelGroupList;
};
// 选中表格 checkbox
const onSelect = (selection, row) => {
    if (selection.constructor === Array) checkList.value = selection.map(v => v.id);
};
// 选择项变更
const onSelectionChange = selection => {};
// 全选
const onSelectAll = selection => {
    checkList.value = selection.map(v => v.id);
};
// 刷新表格
// const reloadTable = () => {
//   tableRef.value.reload()
// }
// 导出表格数据
// const exportTableData = () => {
// }

const createMoments = () => {
    router.push({
        path: '/channel/qwbasicoperation/welcomegroup/addWelcomgroup'
    });
};
//放大图片
const BigImage = (data: any) => {
    bigImgList.value = [];
    bigImgList.value.push(data);
};
//预览
const downLoad = (url: any, row?: any) => {
    downFile(url, row.name ? row.name : row);
};
// 预览按钮
const preInfo = async (val: any) => {
    userInfoId.value = val;
    try {
        const res: any = await channelGroupInfo({
            welcome_groupchat_id: val
        });
        custInfo.value = {
            send_times: res.send_times + '个',
            users_depart_name: `${res.welcome_groupchat_attachment?.length ?? 0}个`,
            user_name: res.user_name,
            user_departName: IsNotEmpty(res.user_local_department)
                ? getSetionId('name', res.user_local_department).join(' ')
                : '--',
            update_user_name: res.update_user_name,
            create_time: res.created_at,
            updated_at: res.updated_at
        };
        const {
            welcome_info: { welcome_text, welcome_material }
        } = res;
        inputContentData.value = welcome_text;
        materialContentData.value = initMaterialData(welcome_material);
        DrawerRef.value.drawer = true;
        DrawerRef.value.width = 430;
        DrawerRef.value.title = '预览欢迎语';
    } catch (e) {}
};
//获取生效部门、员工
// const getUser = (department: any, user: any) => {
//   let nameList: string[] = []
//   if (department.length > 0) {
//     department.forEach((item: any) => {
//       nameList.push(item.name)
//     })
//   }
//   if (user.length > 0) {
//     user.forEach((item: any) => {
//       nameList.push(item.name)
//     })
//   }
//   if (nameList.length > 0) {
//     return nameList.join('、')
//   } else {
//     return ''
//   }
// }
// 手机预览数据
// const getPhoneData = (data: any[], userName: string, content: string) => {
//   let arr: any[] = []
//   if (content) {
//     arr.push({
//       type: 0,
//       content: content
//       //user_name: userName
//     })
//   }
//   if (data.length > 0) {
//     data.forEach((item: any) => {
//       let obj = {
//         type: 0,
//         absolute_url: '',
//         name: '',
//         title: '',
//         content: '',
//         cover_image_url: '',
//         file_size: '',
//         user_name: '',
//         mediaFileInfo: {
//           size: 0
//         }
//       }
//       //obj.user_name = userName
//       // 图片
//       if (item.type == 1) {
//         obj.type = 1
//         obj.absolute_url = item.media_file.absolute_url
//       }

//       // 视频
//       if (item.type == 2) {
//         obj.type = 2
//         obj.thumbnail_url = getVideoImage(item.media_file?.absolute_url, 80, 55)
//       }
//       // 链接
//       if (item.type == 3) {
//         obj.type = 3
//         obj.title = item.content_id == 0 ? item.link_title : item.media_content_link.link_title
//         // obj.content = item.content_id == 0 ? item.link_decs : item.media_content_link.content
//         obj.cover_image_url = item.content_id == 0 ? item.link_share_image : item.media_content_link?.cover_image_url
//       }
//       // 抽奖
//       if (item.type == 6) {
//         obj.type = 6
//         obj.title = item.link_title
//         obj.content = item.link_decs
//         obj.cover_image_url = item.link_share_image
//       }
//       // 音频
//       if (item.type == 4) {
//         obj.type = 4
//         obj.title = item.media_file?.name
//         obj.name = item.media_file?.name
//         obj.file_size = item.media_file?.size
//         obj.cur_icon = '/static/file/mp3.png'
//       }
//       // 文件
//       if (item.type == 5) {
//         obj.type = 5
//         obj.title = item.media_file?.name
//         obj.name = item.media_file?.name
//         obj.mediaFileInfo.size = item.media_file?.size
//       }
//       // 电商--产品
//       if (item.type == 7) {
//         obj.type = 7
//         obj.name = item.link_title
//       }
//       // 电商--页面
//       if (item.type == 8) {
//         obj.type = 8
//         obj.name = item.link_title
//       }
//       // 收集表
//       if (item.type == 9) {
//         obj.type = 9
//         obj.name = item.link_title
//       }
//       //公众号图文
//       if (item.type == 10) {
//         obj.type = 10
//         obj.name = getArticleTypeName(1, item.official_article) || item.link_title
//         obj.cur_icon = getArticleTypeName(2, item.official_article)
//       }
//       if (item.type == 11) {
//         obj.type = 11
//         obj.name = item.mini_program.title
//         obj.imgUrl = item.mini_program.image_url
//       }
//       arr.push(obj)
//     })
//   }
//   FriendDetail.value = arr
// }
const drawerConfirm = (val: any) => {
    router.push('/channel/qwbasicoperation/welcomegroup/addWelcomgroup?id=' + val + '&type=edit');
};
const delItem = (val: number) => {
    const { is_association_activity, activity_name, activity_type_name }: any = val;
    userInfoId.value = val;
    if (is_association_activity === 1) {
        const str = `该入群欢迎语为【${activity_name}】【${activity_type_name}】活动创建的，确认要删除吗？删除后活动里设置的欢迎语也会删除`;
        DeletdialogRef.value.content = str;
    }
    DeletdialogRef.value.appDialog.visible = true;
};
const del = () => {
    channelGroupDel({
        welcome_groupchat_id: userInfoId.value.id
    }).then((res: any) => {
        ElMessage.success('删除成功');
        DeletdialogRef.value.appDialog.visible = false;
        tableRef.value.reload();
    });
};
const closeFun = (val: any) => {
    PreviewShow.value = val;
};

const closeMark = () => {
    markShow.value = false;
};

const AudioPreview = (val: any) => {
    audioShow.value = true;
    setTimeout(() => {
        bus.emit('preview', val);
    });
};

/**
 * 1-图文 2-文字 3-视频 4-音频 5-图片
 * @param {*} type 1-name 2-imgUrl
 * @param {*} articleType
 */
const getArticleTypeName = (type: number, article: any) => {
    const articleType = article.type;
    const list = [
        { name: '', code: 1, iconUrl: '/static/file/official.png' },
        { name: '', code: 2, iconUrl: '/static/file/text.png' },
        { name: '视频', code: 3, iconUrl: '/static/file/mov.png' },
        { name: '音频', code: 4, iconUrl: '/static/file/mp3.png' },
        { name: '图片', code: 5, iconUrl: '/static/file/pic.png' }
    ];
    const info: any = list.find(el => el.code == articleType) || {};
    if (type == 1) {
        return info.name;
    } else if (type == 2) {
        if (articleType == 1) {
            return article.cover;
        } else {
            return info.iconUrl;
        }
    }
};

const audioFun = () => {
    audioShow.value = false;
};
const linkDown = (url: any) => {};
bus.on('close', closeFun);
bus.on('closeMark', closeMark);
bus.on('audio', audioFun);
</script>

<style lang="scss" scoped>
.welcome_group_container {
    height: calc(100vh - 142px);
    display: flex;
    flex-direction: column;

    .welcome_group_main {
        flex: 1;
        padding: 24px;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}

.dropdown_btn {
    margin-right: 10px;
}

.header_top {
    box-sizing: border-box;
    height: 132px;
    background: #fff;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header_top_l {
        display: flex;
        justify-content: space-between;
    }

    .custom_avator {
        width: 100px;
        height: 100px;
        margin-right: 25px;
    }

    .custom_intro {
        margin-left: 15px;
    }

    .custom_desc {
        display: flex;
        justify-content: space-between;

        .custom_detail {
            width: 45%;
        }

        .custom_desc_title {
            margin-top: 10px;
            font-size: 20px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            color: #33302d;
            line-height: 21px;
            margin-bottom: 6px;
        }
    }

    .custom_desc_desc {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #696969;
        line-height: 18px;
    }

    .line-item {
        width: 1px;
        height: 89px;
        background-color: #f0f0f0;
        border-radius: 1px;
        margin: 0 20px;
    }

    .title-text {
        height: 78px;
        display: flex;
        flex-flow: column wrap;

        .custom_text {
            display: flex;
            margin: 7px 92px 0 0;

            .custom_point {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #ff6b00;
                margin: 5.5px 9px 0 0;
            }

            .custom_text-detail {
                font-size: 14px;
                color: #33302d;
                font-weight: 300;
                margin-top: 5px;
            }
        }
    }
}

:deep .depart_main {
    width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.preview {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .prev_box {
        margin: 20px auto;
    }

    .pre_list {
        margin: 15px 30px 15px 10px;
        width: 370px;
        overflow: auto;
        background: #f7f7f7;
        border-radius: 1px;
        padding: 0 10px 0 20px;
        padding-bottom: 1px;
        box-sizing: border-box;

        .pre_main {
            padding-top: 12px;

            .pre_list_item {
                margin-bottom: 16px;
                display: flex;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                text-align: left;

                .pre_item_con {
                    flex: 1;
                    color: #33302d;
                }
            }

            .pre_item_label {
                margin-bottom: 16px;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                display: flex;

                .item_name {
                    width: 125px;
                }

                .item_value {
                    box-sizing: border-box;
                    flex: 1;
                    font-size: 14px;
                    white-space: wrap;
                }
            }

            .send_box {
                display: flex;
                width: 100%;
                font-size: 12px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                transform: scale(0.83);
                transform-origin: left top;
                margin-bottom: 4px;
                color: #33302d;

                .send_box_name {
                    display: inline-block;
                    width: 98px;
                }
            }
        }
    }
}

:deep .wel_content_file_item {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}

.wel_content_file_item:nth-child(n + 10) {
    display: none;
}

:deep(.inlineblock) {
    display: inline-block;
}
</style>
